<template>
    <ul>
        <li :style="{ opacity }">欢迎学习vue</li>
        <li>news001<input type="text" /></li>
        <li>news002<input type="text" /></li>
        <li>news003<input type="text" /></li>
    </ul>
</template>

<script>
export default {
    name: "News",
    data() {
        return {
            opacity: 1,
        };
    },
    /* mounted() {
        this.timer = setInterval(() => {
            this.opacity -= 0.01;
            if (this.opacity <= 0) this.opacity = 1;
        }, 16);
    },
    beforeDestroy() {
        clearInterval(this.timer);
        console.log("News组件即将被销毁");
    }, */
    activated() {
        console.log("News组件激活了");
        this.timer = setInterval(() => {
            this.opacity -= 0.01;
            if (this.opacity <= 0) this.opacity = 1;
        }, 16);
    },
    deactivated() {
        console.log("News组件失活了");
        clearInterval(this.timer);
    },
};
</script>

<style>
</style>